<template>
  <div>
    <div class="form-edit-btns">
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-plus"
        @click="showAddView"
      >
        添加习题分类
      </el-button>
    </div>
    <el-main style="padding-left: 0px; padding-top: 0px">
      <div class="table-box">
        <el-table
          :data="objs"
          v-loading="tableLoading"
          border
          stripe
          @selection-change="handleSelectionChange"
          size="mini"
          style="width: 100%"
        >
          <el-table-column type="selection" align="left"> </el-table-column>
          <el-table-column prop="name" label="名称"> </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="showEditView(scope.row)"
                type="text"
                size="mini"
                >编辑
              </el-button>
              <el-button type="text" size="mini" @click="deleteObj(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          :page-size="20"
          :current-page="currentPage"
          @current-change="currentChange"
          layout="prev, pager, next"
          :total="totalCount"
        >
        </el-pagination>

        <div class="form-edit-btns" style="float: right">
          <el-button
            type="danger"
            size="mini"
            v-if="objs.length > 0"
            :disabled="multipleSelection.length == 0"
            @click="deleteMany"
            >批量删除
          </el-button>
        </div>
      </div>
    </el-main>

    <el-form
      :model="obj"
      :rules="rules"
      ref="addForm"
      style="margin: 0px; padding: 0px"
    >
      <div style="text-align: left">
        <el-dialog
          :title="dialogTitle"
          style="padding: 0px"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          width="77%"
        >
          <el-row>
            <el-form-item label="名称:" prop="name">
              <el-input
                prefix-icon="el-icon-edit"
                v-model="obj.name"
                size="mini"
                placeholder="请输入分类名称"
              ></el-input>
            </el-form-item>
          </el-row>

          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="cancelEidt">取 消</el-button>
            <el-button size="mini" type="primary" @click="add('addForm')"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      objs: [],
      dialogTitle: "",
      multipleSelection: [],
      totalCount: -1,
      currentPage: 1,
      dialogVisible: false,
      tableLoading: false,
      obj: {
        name: "",
      },
      rules: {
        name: [{ required: true, message: "必填:分类名称", trigger: "blur" }],
      },
    };
  },
  mounted: function () {
    this.loadObjs();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteMany() {
      this.$confirm(
        "此操作将删除[" + this.multipleSelection.length + "]条数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          var ids = "";
          for (var i = 0; i < this.multipleSelection.length; i++) {
            ids += this.multipleSelection[i].id + ",";
          }
          this.doDelete(ids);
        })
        .catch(() => {});
    },
    deleteObj(row) {
      this.$confirm("此操作将永久删除[" + row.name + "], 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.doDelete(row.id);
        })
        .catch(() => {});
    },
    doDelete(ids) {
      this.tableLoading = true;
      var _this = this;
      const id = ids;
      this.postRequest("/shop/cate/delete", {ids,id}).then((resp) => {
        _this.tableLoading = false;
        if (resp && resp.status == 200) {
          var data = resp.data;
          _this.$message({ type: data.status, message: data.msg });
          _this.loadObjs();
        }
      });
    },

    currentChange(currentChange) {
      this.currentPage = currentChange;
      this.loadObjs();
    },
    loadObjs() {
      var _this = this;
      this.tableLoading = true;
      this.getRequest(
        "/shop/cate/list?pageNo=" + this.currentPage + "&pageSize=20"
      ).then((resp) => {
        this.tableLoading = false;
        if (resp && resp.status == 200) {
          var data = resp.data;
          _this.objs = data.data.arrays;
          _this.totalCount = data.data.count;
        }
      });
    },
    add(formName) {
      var _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.obj.id) {
            //更新
            this.tableLoading = true;
            this.postRequest("/shop/cate/update", this.obj).then((resp) => {
              _this.tableLoading = false;
              if (resp && resp.status == 200) {
                var data = resp.data;
                _this.$message({ type: data.status, message: data.msg });
                _this.dialogVisible = false;
                _this.emptyObjData();
                _this.loadObjs();
              }
            });
          } else {
            //添加
            this.tableLoading = true;
            this.postRequest("/shop/cate/save", this.obj).then((resp) => {
              _this.tableLoading = false;
              if (resp && resp.status == 200) {
                var data = resp.data;
                _this.$message({ type: data.status, message: data.msg });
                _this.dialogVisible = false;
                _this.emptyObjData();
                _this.loadObjs();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    cancelEidt() {
      this.dialogVisible = false;
      this.emptyObjData();
    },
    showEditView(row) {
      //console.log(row);
      this.dialogTitle = "编辑分类";
      this.obj.name = row.name;
      this.obj.id = row.id;
      this.dialogVisible = true;
    },
    showAddView() {
      this.dialogTitle = "添加分类";
      this.dialogVisible = true;
      var _this = this;
    },
    emptyObjData() {
      this.obj = {
        name: "",
      };
    },
  },
};
</script>
<style scoped>
.el-dialog__body {
  padding-top: 0px;
  padding-bottom: 0px;
}

.slide-fade-enter-active {
  transition: all 0.8s ease;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>
